<template>
  <div class="Home">
    <h1>Home</h1>
    <p class="time">
      时间过滤器：{{ time | dateFilter("YYYY-MM-DD hh:mm:ss") }}
    </p>
    <p>字体引用：<i class="iconfont iconjinggao"></i></p>
    <p>单独使用防抖：{{ num }} <button @click="add">num++</button></p>
    <p>全局指令防抖：{{ num1 }} <Button v-debounce="add1">num1++</Button></p>
    <p>
      全局指令防抖(带参)：{{ num2 }}
      <Button v-debounce="() => add2(2)">num2++</Button>
    </p>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      // 时间
      time: new Date(),
      // 数字
      num: 0,
      num1: 0,
      num2: 0,
    };
  },
  mounted() {
    console.log("mounted");
    console.info("mounted");
    // 测试axios和vuex
    this.get();
  },
  methods: {
    // 单独防抖
    add: _.debounce(
      function () {
        this.num++;
      },
      1000,
      { leading: true }
    ),
    // 全局指令防抖不带参数
    add1() {
      this.num1++;
    },
    // 全局指令防抖带参数
    add2(value) {
      this.num2 += value;
    },
    // 测试axios和vuex
    get() {
      this.$store.dispatch("home/getActions", { data: "" }).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.Home {
  height: 1000px;
  h1 {
    font-size: 20px;
  }
  .time {
    font-size: 24px;
  }
}
</style>
